<template>
  <my-modal
    ref="modal"
    title="消费详情"
    width="92%"
    :top="navBarHeight"
    @afterModalClose="afterModalClose"
    @clickModal="afterModalClose"
    @catchtouchmove="true"
    maskBg="rgba(0, 0, 0, 0.6)"
  >
    <view class="consume-container">
      <view class="header row">
        <view class="column-1">品名</view>
        <view class="column-2">数量</view>
        <view class="column-3">金额</view>
        <view class="column-4">备注</view>
      </view>

      <scroll-view scroll-y class="row-container">
        <view v-for="item in detail" :key="item.Id" class="row">
          <view class="column-1">{{ item.BeverageName }}</view>
          <view class="column-2">x{{ item.Quantity }}</view>
          <view class="column-3 text-price">{{ item.Price }}</view>
          <view class="column-4">{{ item.Remark }}</view>
        </view>
      </scroll-view>

      <view class="footer">
        <view class="left">
          <view class="item">
            <view class="title">房台号 :</view>
            <view class="value">{{ consume.RoomId }}</view>
          </view>
          <view class="item">
            <view class="title">消费金额 :</view>
            <view class="value text-price">{{ $format(consume, 'BillCost', '0') }}</view>
          </view>
        </view>
        <view class="right">
          <view class="item">
            <view class="title">已付金额 :</view>
            <view class="value text-price">{{ $format(consume, 'BillPaid', '0') }}</view>
          </view>
          <view class="item">
            <view class="title">未付金额 :</view>
            <view class="value text-price">{{ $format(consume, 'BillUnpaid', '0') }}</view>
          </view>
        </view>
      </view>
    </view>
  </my-modal>
</template>

<script>
export default {
  data() {
    return {
      // 消费详情
      consume: null
    }
  },
  computed: {
    detail() {
      return this.$format(this.consume, 'detail')
    }
  },
  methods: {
    open(param) {
      this.consume = this.$format(param, 'consume')

      // 测试
      // this.consume.detail = new Array(20).fill({ BeverageName: '1234', Quantity: '123', Price: '123', Remark: '123' })

      if (!this.consume) return this.$msg('text', '暂未获取到消费详情数据')
      this.$refs.modal.open({ showClose: this.$format(param, 'showClose', true) })
    },
    close() {
      this.$emit('afterModalClose')
      this.$refs.modal.close()
    },
    afterModalClose() {
      this.$emit('afterModalClose')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #292f45;

// 如若修改，请同步修改 user 界面该变量
$consumeContainerHeight: 80vh;
$headerHeight: 40px;
$footerHeight: 80px;
.consume-container {
  height: $consumeContainerHeight;
  color: $color-primary-grey-text;
  .header {
    padding: 0;
    @include is-flex(row, flex-start, center, nowrap);
    background: $bg !important;
    height: $headerHeight;
    line-height: $headerHeight;
    font-size: $font-size-base !important;
    .column-3 {
      color: $color-primary-grey-text !important;
    }
  }

  .row-container {
    height: calc(#{$consumeContainerHeight} - #{$headerHeight} - #{$footerHeight});
    overflow: auto;
  }

  .row {
    padding: 10px 15px;
    @include is-flex(row, flex-start, center, nowrap);
    background: $bg;
    font-size: $font-size-xs;
    &:nth-child(odd) {
      background: $color-primary-modal-bg;
    }
    .column-1 {
      width: 45%;
      text-align: left;
    }
    .column-2 {
      width: 15%;
      text-align: center;
    }
    .column-3 {
      width: 15%;
      color: $gold;
      text-align: center;
    }
    .column-4 {
      text-align: right;
      width: 25%;
    }
  }

  .footer {
    @include is-flex(row, space-between, center, nowrap);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: $footerHeight;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    padding: 15px;
    font-size: $font-size-sm;
    background: $color-primary-modal-bg;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    .left,
    .right {
      width: 45%;
      height: 100%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
    }
    .item {
      width: 100%;
      @include is-flex(row, space-between, center, nowrap);
      .title {
        color: $color-primary-grey-text;
      }
      .value {
        color: $white;
      }
    }
  }
}
</style>
